import QtQuick 2.0

Rectangle {
    property color black: "#1f1f21";
    property color red: "#fc3d39";
    property color green: "#53d769";

    id: root;

    Rectangle {
        id: light;
        width: 150;
        height: 250;
        anchors.left: parent.left;
        anchors.leftMargin: 20;
        anchors.verticalCenter: parent.verticalCenter;

        gradient: Gradient {
            GradientStop { position: 0.0; color: "#2ed5fa" }
            GradientStop { position: 1.0; color: "#2467ec" }
        }

        Rectangle {
            id: light1;
            x: 25; y: 15;
            width: 100; height: width;
            radius: width/2;
            color: root.black;
            border.width: 2;
            border.color: Qt.lighter(color, 1.1);
        }

        Rectangle {
            id: light2;
            x: 25; y: 135;
            width: 100; height: width;
            radius: width/2;
            color: root.black;
            border.width: 2;
            border.color: Qt.lighter(color, 1.1);
        }

        state: "stop";

        states: [
            State {
                name: "stop";
                PropertyChanges { target: light1; color: root.red; }
                PropertyChanges { target: light2; color: root.black; }
            },
            State {
                name: "go";
                PropertyChanges { target: light1; color: root.black; }
                PropertyChanges { target: light2; color: root.green; }
            }
        ]

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                parent.state = (parent.state == "stop" ? "go" : "stop");
            }
        }

        transitions: [
            Transition {
                from: "stop"; to: "go";
                ColorAnimation { target: light1; property: "color"; duration: 2000; }
                ColorAnimation { target: light2; property: "color"; duration: 2000; }
            }
        ]
    }
}
